<template>
    <div>
        <h4>
            <img src="../../../assets/icon_double_arrow.png" />
            <span>干线车速排名</span>
        </h4>
        <el-table
            class-name="table"
            :data="tableData"
            size="small"
            row-class-name="row"
            :header-row-class-name="'row-header'"
            :cell-style="{ background: 'transparent' }"
            :header-cell-style="{ backgroundColor: 'rgba(255,255,255,0.17)' }"
            style="width: 100%"
        >
            <el-table-column align="left" prop="order" label="道路名称">
                <template #default="scope">
                    <span class="name">
                        <img
                            v-if="scope.$index === 0"
                            class="icon-rank"
                            src="../../../assets/icon_rank_1.png"
                        />
                        <img
                            v-else-if="scope.$index === 1"
                            class="icon-rank"
                            src="../../../assets/icon_rank_2.png"
                        />
                        <img
                            v-else-if="scope.$index === 2"
                            class="icon-rank"
                            src="../../../assets/icon_rank_3.png"
                        />
                        <span
                            style="display: inline-block"
                            v-else
                            class="icon-rank"
                        >
                            {{ scope.$index + 1 }}
                        </span>

                        <span>{{ scope.row.roadName }}</span>
                        <span class="xxx">{{ scope.row.roadsegName }}</span>
                    </span>
                </template>
            </el-table-column>
            <el-table-column
                :width="100"
                class-name="speed-col"
                align="left"
                prop="speed"
                label="车速"
            >
                <template #default="scope">
                    <span>{{ scope.row.speed }}km/h</span>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script setup lang="ts">
import { roadIndexList } from "@/services/dashborad";
import { DATE_TIME_FORMAT } from "@/const";
import dayjs from "dayjs";
import { onMounted, ref } from "vue";
const tableData = ref([]);
const getRoadIndexList = async () => {
    const result = (await roadIndexList({
        currentTime: dayjs().format(DATE_TIME_FORMAT),
    })) as any;
    if (result?.length > 0) {
        tableData.value = result.slice(0, 6);
        // table.value?.sort('congestion', 'descending')
    }
};
onMounted(() => {
    getRoadIndexList();
});
</script>
<style lang="scss" scoped>
h4 {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    color: #c5fbff;
    > img {
        width: 18px;
        width: 19px;
        margin-right: 4px;
    }
}
.row {
    height: 32px;
}
.table {
    --el-table-tr-bg-color: transparent;
    --el-table-header-bg-color: transparent;
    --el-table-bg-color: transparent;
    --el-table-border-color: transparent;
    --el-table-header-text-color: #fff;
    --el-table-text-color: #fff;

    font-size: 14px;

    :deep(.el-table__row) {
        height: 38px;
    }

    :deep(.cell) {
        padding: 0 20px;
    }

    :deep(.speed-col) {
        color: #4bc6ff;
    }

    .name {
        display: flex;
        align-items: center;
    }

    .xxx {
        margin-left: 13px;
        color: #97f7f5;
    }

    .icon-rank {
        margin-right: 8px;
        width: 20px;
        height: 24px;
    }
}
</style>
